<template>
  <div id="base-list-layout">
    <div class="tag-clouds">
      <div class="tag-cloud" v-if="['tag', 'post'].includes($route.meta.pid)">
        <router-link
          class="blog-tag"
          to="/post/"
          :class="$route.meta.id == 'post' ? 'active' : ''"
        >
          全部 ({{ pageCount }})
        </router-link>
      </div>
      <div
        v-for="tag in $route.meta.pid == 'author'
          ? $author._metaMap
          : $tag._metaMap"
        :key="tag.key"
        class="tag-cloud"
      >
        <router-link
          v-if="tag.pages.length > spread ? 3 : 0"
          class="blog-tag"
          :to="tag.path"
          :class="$route.meta.id == tag.key ? 'active' : ''"
        >
          {{ tag.key }} ({{ tag.pages.length }})
        </router-link>
      </div>
      <div class="tag-cloud" style="margin-left: 10px" v-if="spread">...</div>

      <div class="show-tag">
        <span v-if="$route.meta.pid == 'tag' && $route.meta.id != 'tag'">
          当前标签：<span style="color: red; margin-right: 5px">{{
            $route.meta.id
          }}</span>
          <a href="/tag/">返回标签列表</a>
        </span>
        <span
          v-else-if="$route.meta.pid == 'author' && $route.meta.id != 'author'"
        >
          当前作者：<span style="color: red; margin-right: 5px">{{
            $route.meta.id
          }}</span>
          <a href="/author/">返回作者列表</a>
        </span>
        <span v-else
          >本站点共计 {{ pageCount }} 篇文章 , {{ tagCount }} 个标签</span
        >
        <span class="tag-spread" @click="spread = !spread">
          <ChevronsDownIcon v-if="spread" /><ChevronsUpIcon
            v-if="!spread"
          /><span>{{ spread ? "展开" : "收起" }}</span>
        </span>
      </div>
    </div>

    <div class="ui-posts" itemscope itemtype="http://schema.org/Blog">
      <article
        v-for="page in pages"
        :key="page.key"
        class="ui-post"
        itemprop="blogPost"
        itemscope
        itemtype="https://schema.org/BlogPosting"
      >
        <meta itemprop="mainEntityOfPage" :content="page.path" />

        <header class="ui-post-title" itemprop="name headline">
          <NavLink :link="page.path">{{ page.title }}</NavLink>
        </header>

        <client-only v-if="page.excerpt">
          <!-- eslint-disable vue/no-v-html -->
          <p
            class="ui-post-summary"
            itemprop="description"
            v-html="page.excerpt"
          />
          <!-- eslint-enable vue/no-v-html -->
        </client-only>
        <p v-else class="ui-post-summary" itemprop="description">
          {{ page.frontmatter.summary || page.summary }}
        </p>

        <footer>
          <div
            v-if="page.frontmatter.author"
            class="ui-post-meta ui-post-author"
            itemprop="publisher author"
            itemtype="http://schema.org/Person"
            itemscope
          >
            <NavigationIcon />
            <span itemprop="name"
              ><router-link :to="'/author/' + page.frontmatter.author + '/'">{{
                page.frontmatter.author
              }}</router-link></span
            >
            <span v-if="page.frontmatter.location" itemprop="address">
              &nbsp; in {{ page.frontmatter.location }}
            </span>
          </div>

          <div v-if="page.frontmatter.date" class="ui-post-meta ui-post-date">
            <ClockIcon />
            <time
              pubdate
              itemprop="datePublished"
              :datetime="page.frontmatter.date"
            >
              {{ resolvePostDate(page.frontmatter.date) }}
            </time>
          </div>

          <div
            v-if="page.frontmatter.tags"
            class="ui-post-meta ui-post-tag"
            itemprop="keywords"
          >
            <TagIcon />
            <router-link
              v-for="tag in resolvePostTags(page.frontmatter.tags)"
              :key="tag"
              :to="'/tag/' + tag"
            >
              {{ tag }}
            </router-link>
          </div>
        </footer>
      </article>
    </div>

    <component
      :is="paginationComponent"
      v-if="$pagination.length > 1 && paginationComponent"
    ></component>
  </div>
</template>

<script>
/* global THEME_BLOG_PAGINATION_COMPONENT */

import Vue from "vue";
import dayjs from "dayjs";
import dayjsPluginUTC from "dayjs/plugin/utc";
import BlogTag from "./BlogTag";
import {
  NavigationIcon,
  ClockIcon,
  TagIcon,
  ChevronsDownIcon,
  ChevronsUpIcon,
} from "vue-feather-icons";
import {
  Pagination,
  SimplePagination,
} from "@vuepress/plugin-blog/lib/client/components";

dayjs.extend(dayjsPluginUTC);

export default {
  components: {
    NavigationIcon,
    ClockIcon,
    TagIcon,
    BlogTag,
    ChevronsDownIcon,
    ChevronsUpIcon,
  },

  data() {
    return {
      paginationComponent: null,
      spread: false,
    };
  },

  computed: {
    pages() {
      return this.$pagination.pages;
    },
    pageCount() {
      let count = 0;
      this.$site.pages.forEach(element => {
        element.pid == 'post'?count++:''
      });
      return count;
    },
    tagCount() {
      return Object.keys(this.$tag._metaMap).length;
    },
  },

  created() {
    this.paginationComponent = this.getPaginationComponent();
  },

  methods: {
    getPaginationComponent() {
      const n = THEME_BLOG_PAGINATION_COMPONENT;
      if (n === "Pagination") {
        return Pagination;
      }

      if (n === "SimplePagination") {
        return SimplePagination;
      }

      return Vue.component(n) || Pagination;
    },

    resolvePostDate(date) {
      return dayjs
        .utc(date)
        .format(this.$themeConfig.dateFormat || "ddd MMM DD YYYY");
    },

    resolvePostTags(tags) {
      if (!tags || Array.isArray(tags)) return tags;
      return [tags];
    },
  },
};
</script>

<style lang="stylus">
#base-list-layout {
  margin: 30px 20px;
}

.common-layout {
  .content-wrapper {
    padding-bottom: 80px;
  }
}

.ui-post {
  padding-bottom: 25px;
  margin-bottom: 25px;
  border-bottom: 1px solid $borderColor;

  &:last-child {
    border-bottom: 0px;
    margin-bottom: 0px;
  }
}

.ui-post-title {
  font-family: PT Serif, Serif;
  font-size: 28px;
  border-bottom: 0;

  a {
    cursor: pointer;
    color: $darkTextColor;
    transition: all 0.2s;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

.ui-post-summary {
  font-size: 14px;
  color: rgba($darkTextColor, 0.54);
  font-weight: 200;
}

.ui-post-meta {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  line-height: 12px;

  &:not(:last-child) {
    margin-bottom: 3px;
    margin-right: 20px;
  }

  svg {
    margin-right: 5px;
    width: 14px;
    height: 14px;
  }

  @media (max-width: $MQMobile) {
    display: flex;

    &:not(:last-child) {
      margin-bottom: 10px;
    }
  }
}

.ui-post-author {
  color: rgba($darkTextColor, 0.84);
  font-weight: 400;
}

.ui-post-date {
  color: rgba($darkTextColor, 0.54);
  font-weight: 200;
}

.ui-post-tag {
  color: rgba($darkTextColor, 0.54);
  font-weight: 200;

  a {
    color: inherit;
    font-weight: 200;
    text-decoration: none;
    margin-right: 5px;

    &:hover {
      color: var(--main-color);
    }
  }
}

.tag-clouds {
  margin-bottom: 30px;

  .show-tag {
    border-left: 2px solid var(--main-color);
    padding-left: 20px;
    margin-top: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    height: 40px;
    line-height: 40px;

    .tag-spread {
      cursor: pointer;
      color: var(--main-color);
      float: right;
      margin-right: 8px;

      svg {
        margin-top: 3px;
        height: 14px;
      }
    }
  }

  .tag-cloud {
    display: inline-flex;
    align-items: center;

    .blog-tag {
      word-break: break-word;
      font-size: 14px;
      margin-right: 10px;
      margin-bottom: 10px;
      padding: 5px 15px;
      border-radius: 5px;
      font-weight: 300;
      box-sizing: border-box;
      transition: background-color 0.3s;
      color: $darkTextColor;
      border: 1px solid $darkBorderColor;
      text-decoration: none;
      transition: all 0.5s;

      &.active, &:hover {
        color: var(--main-color) !important;
        border: 1px solid var(--main-color);
        box-shadow: 0 0 5px var(--main-color);
      }
    }
  }
}
</style>
